<template>
  <div class="sortable-container" ref="tableRef">
    <CreateTable :columns="tableColumns" :data="tableData" border />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import CreateTable from '@/components/CreateTable/index.vue'
import dynamicData from './data/dynamicProp'
import { initSortable } from './data/handleSortable'

const tableRef = ref(null)
const tableColumns = ref(dynamicData())

// 表格数据
const tableData = ref([])
tableData.value = [
  {
    name: '啊啊啊啊111',
    day: '2022-01-01',
    city: '北京',
    sex: '男',
    age: '20'
  },
  {
    name: '啊啊啊啊222',
    day: '2022-01-01',
    city: '北京',
    sex: '男',
    age: '20'
  },
  {
    name: '啊啊啊啊333',
    day: '2022-01-01',
    city: '北京',
    sex: '男',
    age: '20'
  },
  {
    name: '啊啊啊啊444',
    day: '2022-01-01',
    city: '北京',
    sex: '男',
    age: '20'
  }
]

// 表格拖拽相关
onMounted(async () => {
  const el = tableRef.value.querySelector(
    '.el-table__body-wrapper .el-table__body tbody'
  )
  initSortable(el)
})
</script>

<style lang="scss" scoped>
.sortable-container {
  ::v-deep .el-table__row {
    cursor: pointer;
  }
}

::v-deep .sortable-ghost {
  opacity: 0.6;
  color: #fff !important;
  background: #304156 !important;
}
</style>
